<script lang="ts" setup>
import EZUIKit from "ezuikit-js";
import { onMounted } from "vue";
import { FetchCamera } from "@/service/getData"

const { Ystoken } = FetchCamera();
const token = localStorage.getItem("token");
interface IPlayer {
  play: Function;
  stop: Function;
  getOSDTime: Function;
  capturePicture: Function;
  openSound: Function;
  closeSound: Function;
  startSave: Function;
  stopSave: Function;
  startTalk: Function;
  stopTalk: Function;
  fullScreen: Function;
  destroy: Function;
}

let player: IPlayer;

const destroy = () => {
  const destroyPromise = player.destroy();
  destroyPromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
  player = null!;
};

const init = async () => {
  if (player) {
    destroy();
  }
  console.group("mounted 组件挂载完毕状态===============》");
  try {
    const accessToken = await Ystoken(token);
    player = new EZUIKit.EZUIKitPlayer({
      id: "video-container", // 视频容器ID
      accessToken: accessToken,
      url: "ezopen://open.ys7.com/AB9831218/1.hd.live",
      // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
      template: "pcLive",
      plugin: ["talk"], // 加载插件，talk-对讲
      width: 750,
      height: 300,
      handleError: (err: any) => {
        console.error("handleError", err);
      },
      env: {
        domain: "https://open.ys7.com",
      },
    });
    window.player = player;
  } catch (error) {
    console.error("Failed to get token:", error);
  }
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="hello-ezuikit-js">
    <div>
      <div id="video-container" style="width: 600px; height: 400px"></div>
    </div>
  </div>
</template>
<style scoped>

</style>
